﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气预报</title>
</head>
<style type="text/css">
    *{margin:0; padding:0;}
	li{list-style: none}
	a{text-decoration: none}
	.scope {
		margin:0 auto;
		width: 1000px;
		height: 600px;
		padding-top:20px;
		background-color: rgb(240,243,245);
		}
	.country{
		width: 680px;
		margin:0 auto;
		background-color: #fff;
		padding:10px 10px;
	}
	.top{
		overflow: hidden;
	}
	.topleft{
		float: left;
		font-size: 14px;
	}
	.topleft a:hover{
		color: #377beb;
	}
	.date{
		overflow: hidden;
		margin-top: 10px;
		}
	.date li{
		float: left;
		width: 134px;
		border:1px solid #fff;
		background-color: #d0ebff;
	}
	.date li:hover{
		background-color: #ecf7ff;
	}
	.date a{
		width: 100%;
		height: 100%;
		color: #4c4c4c;
		display: block;
		font-size: 16px;
		text-align: center;
	}
	.center{
		overflow: hidden;
		margin-top: 10px;
	}
	.center li{
		float: left;
		width: 94px;
		height: 246px;
		background: -webkit-gradient(linear,0% 0,0% 100%,from(#88a9ca),to(#bcd3e3));
		margin-left: 1px;
		border: 1px solid #fff;
	}
	.center li:hover{
		border: 1px solid #1c7ab0;
	}
	.center li h1,h2,h3,h5{
		font-size: 14px;
		color: #fff;
		text-align: center;
	}
	.center li h1{
		margin-top: 10px;
	}
	.center li h2{
		margin-top: 20px;
	}
	.center li h3{
		margin-top: 20px;
	}
	.center li h5{
		margin-top: 20px;
	}
	#template{
		display: none; 
	}
	.dayimg{
		width: 40px;
		margin-top: 10px;
	}
	.nightimg{
		width: 40px;
		margin-top: 10px;	
	}

</style>
	<div class="scope">
		<div class="country">
			<div class="top">
				<div class="topleft">
					<a href="">全国</a><span>></span><input type="" name="" id="input"><span>></span><span></span><button id="button">查询</button>
				</div>
			</div>
			<div class="center">
				<li id="template">
						<h1 class="date"></h1>
						<img src="" class="dayimg">
						<img src="" class="nightimg">
						<h2 class="weather"></h2>
						<h3 class="temperature"></h3>
						<h5 class="wind"></h5>
					</li>
				<ul id = "temmm">	
				</ul>
				<select id="selt">
					<option><span>请选择地区</span></option>
				</select>
			</div>
		</div>
	</div>
<body>
    <script type="text/javascript">
	var button = document.getElementById("button");
	var input = document.getElementById("input");
	var temmm =  document.getElementById("temmm");
	var script = document.createElement("script");
	var body = document.getElementsByTagName("body")[0];
	var select = document.getElementById("selt");
	
	button.onclick = function(){
		var script = document.createElement("script");
		var body = document.getElementsByTagName("body")[0];
		// call(input.value)
		script.setAttribute("src","http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=5cc2cf7b4d6daf98a6dcdbed11df1504&cityname="+input.value+"&callback=weath")
			body.appendChild(script);
			temmm.innerHTML = "<img src = 'ima/timg.gif'>";
	}
	
	var script = document.createElement("script");
	var body = document.getElementsByTagName("body")[0];
	script.setAttribute("src","http://v.juhe.cn/weather/citys?key=5cc2cf7b4d6daf98a6dcdbed11df1504&callback=cityid")
	body.appendChild(script);
	
	function cityid(distance){
		var cities = distance.result;
		// console.log(cities)
		for(var i = 0 ; i < cities.length ; i ++){
			var newcity = cities[i];
			var option = document.createElement("option");
			if(newcity.province === newcity.city ){
				option.innerHTML = newcity.city +"市"+ newcity.district +"区";
			}
			else{
				option.innerHTML = newcity.province +"省"+ newcity.city +"市"+ newcity.district +"区";
			}
			option.value = newcity.id;
			select.appendChild(option);
		}

	}
	select.onchange = function(){
		var script = document.createElement("script");
		var input = document.getElementsByTagName("input");
		script.setAttribute("src","http://v.juhe.cn/weather/index?format=2&cityname=%E8%8B%8F%E5%B7%9E&key=5cc2cf7b4d6daf98a6dcdbed11df1504&cityname="+this.value+"&callback=weath")
			body.appendChild(script);
			
	}

	function weath(data){
		// console.log(data)
		//循环7天的数据
		temmm.innerHTML = "";
		var template = document.getElementById('template');
		var future = data.result.future;
		var m = 0;
		for(var i in future){
			var newli = template.cloneNode(true);
			temmm.appendChild(newli);
			newli.id = "";
			var data = future[i];
			var date = data.date.slice(-2)+"日";
			var weather = data.weather;
			var temperature = data.temperature;
			var wind = data.wind;
			if(m == 0){
				date = date + "(今天)"
			}
			if(m == 1){
				date = date + "(明天)"
			}
			if(m == 2){
				date = date + "(后天)"
			}
			if(m !==0 && m !==1 && m !==2){
				date = date + "(周" + data.week.slice(-1)+")"
			}
			var temperature = temperature.replace("℃~","/")
	
			newli.getElementsByClassName("date")[0].innerHTML = date;
			newli.getElementsByClassName("weather")[0].innerHTML = weather;
			newli.getElementsByClassName("temperature")[0].innerHTML = temperature;
	
			if(data.weather_id.fa == data.weather_id.fb){
				newli.getElementsByClassName("dayimg")[0].setAttribute("src","froecast/day/" + data.weather_id.fa + ".png")
			}
			else{
				newli.getElementsByClassName("dayimg")[0].setAttribute("src","froecast/day/" + data.weather_id.fa + ".png")
				newli.getElementsByClassName("nightimg")[0].setAttribute("src","froecast/night/" + data.weather_id.fb + ".png")
			}

			newli.getElementsByClassName("wind")[0].innerHTML = wind;
			// console.log(wind)

			
			m ++;
		}
		k = 0;
			var t = setInterval(function(){
				if(k < 1){
					k = k +0.01;
					temmm.style.opacity = k;
				}
				else{
					clearInterval(t);
				}
			},16)
	}

	


	




    </script>
</body>
</html>
